<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>Upload 上传</title>
	<link rel="stylesheet" href="../static/css/element2.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/element-plue2.js"></script>
	
	<script src="../static/js/icons-vue.js"></script>
	
	<link rel="stylesheet" href="../static/css/com.css">
<style>
.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	/* cursor: pointer; */
	/* position: relative; */
	overflow: hidden;
}
.avatar-uploader .el-upload:hover {
	border-color: #409eff;
}
.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 100px;
	height: 100px;
	text-align: center;
}
.avatar {
	width: 100px;
	height: 100px;
	display: block;
}

.el-upload-list--picture-card {
	--el-upload-list-picture-card-size: 100px;
}
.el-upload--picture-card {
	--el-upload-picture-card-size: 100px;
}
</style>
</head>
<body>
<div id="app" class="">
	<a href='Upload.html' class='layui-btn'>基础用法，覆盖前一个文件，用户头像上传，照片墙，自定义缩略图</a>
	<a href='Upload2.html' class='layui-btn0'>图片列表缩略图，上传文件列表控制，拖拽上传，手动上传</a>
	<el-affix :offset="20">
		<el-button type="primary" @click="showValue">查看所选数据</el-button>
	</el-affix>
	
	<el-divider content-position="left">基础用法</el-divider><!-- =============================================================== -->
	<p class="desc">通过 slot 你可以传入自定义的上传按钮类型和文字提示。 可通过设置 limit 和 on-exceed 来限制上传文件的个数和定义超出限制时的行为。 可通过设置 before-remove 来阻止文件移除操作。</p>
	<el-upload class="upload-demo" action="./upfile.php" :on-preview="handlePreview"
	:on-remove="handleRemove1" :before-remove="beforeRemove" :on-success="handleAvatarSuccess0" multiple :limit="5" :on-exceed="handleExceed1" :file-list="fileList">
		<el-button size="large" type="primary">点击上传</el-button>
		<template #tip>
			<div class="el-upload__tip">小于500kb的Jpg /png文件</div>
		</template>
	</el-upload>
	
	<el-divider content-position="left">覆盖前一个文件</el-divider><!-- =============================================================== -->
	<p class="desc">设置 limit 和 on-exceed 可以在选中时自动替换上一个文件。on-preview 是点击文件列表中已上传的文件时的钩子</p>
	<el-upload ref="upload" class="upload-demo" action="http://oa.qiqiao.com/common/common/uploaddemo" :limit="1" :on-exceed="handleExceed22" 
	:on-preview="handlePreview" :auto-upload="false" :file-list="fileList2">
		<template #trigger>
			<el-button type="primary">选择文件</el-button>&nbsp;
		</template>
		<el-button class="ml-3" type="success" @click="submitUpload">上传到服务器</el-button>
		<template #tip>
			<div class="el-upload__tip text-red">限制1个文件，新文件将覆盖旧文件</div>
		</template>
	</el-upload>
	
	<el-divider content-position="left">用户头像上传</el-divider><!-- =============================================================== -->
	<p class="desc">在 before-upload 钩子中限制用户上传文件的格式和大小。</p>
	<el-upload class="avatar-uploader" action="http://oa.qiqiao.com/common/common/uploaddemo"
	:show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
		<img v-if="imageUrl" :src="imageUrl" class="avatar" />
		<el-icon v-else class="avatar-uploader-icon">
			<Plus />
		</el-icon>
	</el-upload>
	
	<el-divider content-position="left">照片墙</el-divider><!-- =============================================================== -->
	<p class="desc">使用 list-type 属性来设定文件列表的样式。（action的值设置为#，可以使用blob:http://127.0.0.1 方式测试上传，无需上传接口）</p>
	<el-upload class="avatar-uploader" action="http://oa.qiqiao.com/common/common/uploaddemo" multiple list-type="picture-card" :on-success="handleAvatarSuccess2"
	:before-upload="beforeAvatarUpload" :on-preview="handlePictureCardPreview1" :on-remove="handleRemove2" :limit="3" :on-exceed="handleExceed3">
		<el-icon class="avatar-uploader-icon">
			<Plus />
		</el-icon>
	</el-upload>
	<el-dialog v-model="dialogVisible">
		<img :src="dialogImageUrl" alt="图片预览" />
	</el-dialog>
	
	<el-divider content-position="left">自定义缩略图</el-divider><!-- =============================================================== -->
	<p class="desc">使用 scoped-slot 属性来改变默认的缩略图模板样式</p>
	<el-upload ref="uploadDiy" action="http://oa.qiqiao.com/common/common/uploaddemo" list-type="picture-card" :on-success="handleAvatarSuccess3">
		<template #default>
			<el-icon>
				<Plus />
			</el-icon>
		</template>
		<template #file="{ file }">
			<div>
				<img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
				<span class="el-upload-list__item-actions">
					<span class="el-upload-list__item-preview" @click="handlePictureCardPreview2(file)">
						<el-icon><zoom-in /></el-icon>
						<!-- <el-icon><ZoomIn /></el-icon> -->
					</span>
					<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
						<el-icon><Download /></el-icon>
					</span>
					<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove3(file)">
						<el-icon><Delete /></el-icon>
					</span>
				</span>
			</div>
		</template>
	</el-upload>
	<el-dialog v-model="dialogVisible2">
		<img :src="dialogImageUrl2" alt="" />
	</el-dialog>
	
</div>
https://jsonplaceholder.typicode.com/posts/		的响应表头前面几项是这样的：
	access-control-allow-credentials: true
	access-control-allow-origin: http://127.0.0.1
	access-control-expose-headers: Location
	alt-svc: h3=":443"; ma=86400, h3-29=":443"; ma=86400
	cache-control: no-cache
</body>
<script>

const Main = {
	data() {
		return {
			value: '',
			fileList: [
				{name: 'food.jpeg',url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',},
				{name: 'food2.jpeg',url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',},
			],
			fileList2: [{name: 'food2.jpeg',url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',},],
			fileList3: null,
			imageUrl: '',
			dialogImageUrl: '',
			dialogImageUrl2: '',
			dialogVisible: false,
			dialogVisible2: false,
			disabled: false,
		}
	},
	methods:{
	// 点击上传
		handleRemove1(file, fileList) {
			console.log('file',file);
			console.log('fileList', fileList);
		},
		handlePreview(file) {
			console.log('handlePreview', file)
		},
		handleExceed1(files, fileList) {
			this.$message.warning(
				`The limit is 5, you selected ${files.length} files this time, add up to ${files.length + fileList.length} totally`
			)
		},
		beforeRemove(file, fileList) {
			return this.$confirm(`Cancel the transfert of ${file.name} ?`)
		},
		
	//覆盖前一个文件
		handleExceed2(file, fileList) {
			console.log('file',file);
			console.log('fileList2', fileList);
			// this.clearFiles();
			// console.log(file[0].name);
			this.$data.fileList2 = [];
			fileInfo = {name: file[0].name, url: 'path/' + file[0].name};
			this.$data.fileList2.push(fileInfo);
		},
		handleExceed22(file, fileList) {
			console.log('file',file);
			console.log('fileList2', fileList);
			// console.log(this.$refs['upload'])
			this.$refs['upload'].clearFiles();
			this.$refs['upload'].handleStart(file[0]);
		},
		submitUpload(){
			this.$refs['upload'].submit();
			this.$message.success("success!");
		},
		
		// 基础用法(多文件上传)
		handleAvatarSuccess0(res, file, fileList) {
			// this.imageUrl = URL.createObjectURL(file.raw)
			console.log("res:", res);
			console.log("file:", file);
			console.log("fileList", fileList);
		},
		// 用户头像上传
		handleAvatarSuccess(res, file, fileList) {
			this.imageUrl = URL.createObjectURL(file.raw)
			console.log(res, file, fileList, this.imageUrl);
		},
		beforeAvatarUpload(file) {
			// console.log(file);
			// const isJPG = file.type === 'image/jpeg'
			// const isJPG = file.type === 'image/png'
			const isImage = file.type === 'image/png' || file.type === 'image/jpeg'
			const isLt2M = file.size / 1024 / 1024 < 2
		
			if (!isImage) {
				this.$message.error('头像图片必须为JPG格式!')
			}
			if (!isLt2M) {
				this.$message.error('头像图片大小不能超过2MB!')
			}
			return isImage && isLt2M
		},
		
		// 照片墙
		handleAvatarSuccess2(res, file, fileList) {
			// this.imageUrl = URL.createObjectURL(file.raw)
			this.fileList3 = fileList;
			// console.log("res:", res);
			console.log("file:", file);
			console.log("fileList:", fileList);
			// console.log("this.imageUrl:", this.imageUrl);
		},
		handleRemove2(file, fileList) {
			console.log("handleRemove2:", file, fileList)
		},
		handlePictureCardPreview1(file) {
			console.log("handlePictureCardPreview1:", file)
			this.dialogImageUrl = file.url
			this.dialogVisible = true
		},
		handleExceed3(files, fileList) {
			this.$message.warning(`最多3张图片, 你选择了 ${files.length} 张, 上传后为 ${files.length + fileList.length} 张。`);
		},
		
		// 文件缩略图
		handleAvatarSuccess3(res, file, fileList) {
			this.imageUrl = URL.createObjectURL(file.raw)
			console.log(res, file, fileList, this.imageUrl);
		},
		handleRemove3(file) {
			console.log(file)
			this.$refs['uploadDiy'].handleRemove(file);
		},
		handlePictureCardPreview2(file) {
			this.dialogImageUrl2 = file.url
			this.dialogVisible2 = true
		},
		handleDownload(file) {
			console.log(file)
		},
		
		showValue(){
			console.log(this.$data.fileList2, this.$data.value);
		},
	},
}
const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
	app.component(key, component)
}
app.use(ElementPlus);
let vm = app.mount("#app");
// console.log(ElementPlus)
</script>
</html>
